// 角色管理
<template>
  <div class="mainarea">
    <!-- 搜索插件 -->
    <search-bar :formOptions="formOptions"
                :searchDialog="searchDialog"
                :clearQueryForm="clearQueryForm"
                @controlSearchDialog="controlSearchDialog"
                @onSearch="onSearch"></search-bar>
    <!-- 工具栏按钮插件 -->
    <tool-bar @controlSearchDialog="controlSearchDialog"></tool-bar>
    <!-- 表格 -->
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%;color: black;margin-top:5px"
              :height="tablehight"
              :cell-style="{padding: '2px'}"
              :header-cell-style="{padding: '2px'}"
              :header-row-style="{color:'black'}"
              tooltip-effect="dark"
              type="index"
              show-header
              stripe
              border>
      <!-- 序号和勾选框 -->
      <el-table-column type="selection"
                       width="50">
      </el-table-column>
      <el-table-column label="序号"
                       type="index"
                       :index="indexMethod"
                       width="60">
      </el-table-column>

      <!-- 动态列 -->
      <el-table-column v-for="item in columnList"
                       :key="item.prop"
                       :label="item.label"
                       :prop="item.prop">
      </el-table-column>

      <!-- 表格静态搜索 -->
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页信息 -->
    <!-- <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNumber"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="this.totalRow">
    </el-pagination> -->
  </div>
</template>

<script>
import ToolBar from '../../../components/table/toolbar-plugin.vue'
import SearchBar from '../../../components/search/search-plugin.vue'
import * as Tools from '../../../components/search/tools'
export default {
  components: {
    ToolBar,
    SearchBar
  },
  data: function () {
    return {
      // 表格动态列
      columnList: [
        { label: 'Name', prop: 'name', element: 'el-input' },
        { label: 'Address', prop: 'address', element: 'el-input' },
        { label: 'Date', prop: 'date', element: 'el-date-picker' }

      ],
      // 需要查询的列
      formOptions: [
        {
          label: '意见内容',
          prop: 'content',
          element: 'el-input'
        },
        {
          label: '类型',
          prop: 'type',
          element: 'el-select',
          options: [
            { label: '给点意见', value: '1' },
            { label: '售后问题', value: '2' }
          ]
        },
        {
          label: '提交时间',
          prop: 'timeRange',
          element: 'el-date-picker'
        }
      ],
      // 是否展示查询条件框
      searchDialog: false,
      // 查询表单数据
      queryFormData: {},
      // 是否清空查询条件的表单数据
      clearQueryForm: false,

      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '李四',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王五',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      // 静态搜索框中的数据
      search: ''
    }
  },
  computed: {
    tablehight () {
      // 表格的高度自适应
      return window.innerHeight - 180 + 'px'
    }
  },
  methods: {
    // 表格序号
    indexMethod (index) {
      return index + 1
    },
    // 获取搜索表单提交的数据
    onSearch (val) {
      this.queryFormData = val
      // 在这进行查询接口的操作
      alert(val)
      this.searchDialog = false
      // 清空表单的数据
      this.clearQueryForm = true
      // 换回之前的状态
      this.clearQueryForm = false
    },
    // 改变 查询条件是否展示
    controlSearchDialog (val) {
      this.searchDialog = val
      // 组装当前表格的数据为查询列
      this.formOptions = Tools.queryColumns(this.columnList)
    },

    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    }

  },
  created () {

  }
}
</script>

<style scoped>
.mainarea {
  padding: 4px;
}
</style>
